<!--
  Copy and paste this HTML to app.xml when you need help on defining position,
  scale or size of new image/text overlays.

  Remomeber to remove the scripts being loaded. They are not only unnecessary
  but also will break your app.
-->

<div id='fullUI'>
  <input class="button" type="button" value="Show Scorer"
         onClick="showScorer();"/><br>
	<label>
    <input id="clear-image" name="clear-text" type="checkbox" checked />
    Clear previous image 
  </label><br><br>

	<input id="loadableURI" type="text" 
	       placeholder="Enter an image URL that ends in .png"
	       style="width:300px;"
         value="https://table-tennis-scoreboard.googlecode.com/git/images/comment.png"
	       />
  <input class="button" type="button" value="Display Image" id="topHatButton"
         onClick="drawImageOverlayTest(document.querySelector('#loadableURI').value);"/>
</div>
<div id="overlayControls">
  <br><br>
	<input id="scale-input" type="text" style="width:100px;" value="0.34"/>
	<input id="scale-ref-input" type="text" value="W" style="width:30px;" />
	<input class="button" type="button" value="Scale" 
         onClick="onSetScale(
             document.querySelector('#scale-input').value,
             document.querySelector('#scale-ref-input').value)"/>
  <br><br>
	<input id="xoffset-input" type="text" style="width:100px;" value="0.325"/>
	<input class="button" type="button" value="X Offset" 
         onClick="onSetOffsetX(document.querySelector('#xoffset-input').value)"/>
  <br><br>
	<input id="yoffset-input" type="text" style="width:100px;" value="0.39"/>
	<input class="button" type="button" value="Y Offset" 
         onClick="onSetOffsetY(document.querySelector('#yoffset-input').value)"/>
</div>

<br><br>
<div id='arbitraryURILoader'>
  Format: text, fontSize, color, bold, shadow, align, xPos, yPos<br>
	<input id="text-format" type="text" 
	       placeholder="Enter an image URL that ends in .png"
	       style="width:300px;"
	       />
  <label>
    Font family:
	  <input id="text-font" type="text" value="Monospace" />
  </label><br>
  <label>
    Font size:
	  <input id="text-size" type="text" value=9 />
  </label><br>
  <label>
    Font color:
	  <input id="text-color" type="text" value="white" />
  </label><br>
  <label>
    Align:
	  <input id="text-align" type="text" value="left" />
  </label><br>
  <label>
    X Pos:
	  <input id="text-xpos" type="text" value="427"/>
  </label><br>
  <label>
    Y Pos:
	  <input id="text-ypos" type="text" value="316"/>
  </label><br>

	<label>
    <input id="text-bold" type="checkbox" />
    Bold
  </label><br>
	<label>
    <input id="text-shadow" type="checkbox" />
    Shadow
  </label><br>
	<label>
    <input id="clear-text" name="clear-text" type="checkbox" checked />
    Clear previous text
  </label><br>
	<input class="button" type="button" value="Show Text" id="animatedButton"
      onClick="drawTextOverlayTest()"/>
</div>
<script src="https://table-tennis-scoreboard.googlecode.com/git/js/find_overlay_setup.js">
</script>

